<!--  -->
<template>
  <div>
    <el-container class="main">

      <el-container>

        <el-aside width="auto">

          <el-menu :default-active="$route.path"
                   class="el-menu-vertical-demo"
                   background-color="#545c64"
                   text-color="#fff"
                   active-text-color="#ffd04b"
                   style="height: 100%"
                   :collapse="isCollapse"
                   router>
            <el-menu-item index="/index">
              <!-- icon 图标 -->
              <i class="el-icon-s-help"></i>
              <span slot="title">首页</span>
            </el-menu-item>

            <!-- 文章中心 -->
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-tableware"></i>
                <span>干饭人</span>
              </template>
              <el-menu-item index="/index/ganfanren/article">echarts</el-menu-item>
            </el-submenu>

          </el-menu>

        </el-aside>

        <el-container>

          <el-header class="header">

            <div class="header-left">
              <i class="myicon"
                 :class="{
                'el-icon-s-fold': !isCollapse,
                'el-icon-s-unfold': isCollapse,
              }"
                 @click="isCollapse = !isCollapse"></i>
              小郑取经之路
            </div>

          </el-header>

          <el-main>
            <!-- 二级路由 -->
            <router-view></router-view>

          </el-main>

        </el-container>
      </el-container>

    </el-container>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    //这里存放数据
    return {
      isCollapse: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () { }, //生命周期 - 创建之前
  beforeMount () { }, //生命周期 - 挂载之前
  beforeUpdate () { }, //生命周期 - 更新之前
  updated () { }, //生命周期 - 更新之后
  beforeDestroy () { }, //生命周期 - 销毁之前
  destroyed () { }, //生命周期 - 销毁完成
  activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
  //方法集合
  methods: {

  },
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.main {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  height: 30px;
}

.myicon {
  font-size: 20px;
  position: relative;
  cursor: pointer;
  top: 2px;
}

.icon-_shouye_02 {
  margin-left: 4px;
  margin-right: 8px;
}

.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

/* 下拉菜单 */
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.mycaidan {
  color: #444;
}
* {
  margin: 0;
  padding: 0;
}
</style>
